<template>
  <view class="login-container">
    <input v-model="username" placeholder="用户名" class="login-input" />
    <input
      v-model="password"
      placeholder="密码"
      type="password"
      class="login-input"
    />
    <button @click="login" class="login-btn">登录</button>
    <button @click="register" class="register-btn">注册</button>
    <view style="margin-top: 20px">
      <button @click="quickLogin('user1')">快速登录用户</button>
      <button @click="quickLogin('customer_service')">快速登录客服</button>
    </view>
  </view>
</template>

<script lang="ts">
import { ref } from "vue";
import { loginApi, registerApi } from "../../api/user";

export default {
  setup() {
    const username = ref("");
    const password = ref("");

    const login = async () => {
      if (!username.value || !password.value) {
        uni.showToast({ title: "请输入用户名和密码", icon: "none" });
        return;
      }
      const res = await loginApi(username.value, password.value);
      if (res.code === 0) {
        uni.setStorageSync("userId", res.data.userId);
        uni.setStorageSync("username", res.data.username);
        uni.showToast({ title: "登录成功", icon: "success" });
        setTimeout(() => uni.switchTab({ url: "/src/pages/index/index" }), 500);
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
      }
    };

    const register = async () => {
      if (!username.value || !password.value) {
        uni.showToast({ title: "请输入用户名和密码", icon: "none" });
        return;
      }
      const res = await registerApi(username.value, password.value);
      if (res.code === 0) {
        uni.showToast({ title: "注册成功，请登录", icon: "success" });
      } else {
        uni.showToast({ title: res.msg, icon: "none" });
      }
    };

    // 快速登录预置账号
    const quickLogin = async (name: string) => {
      const res = await loginApi(name, "123456");
      if (res.code === 0) {
        uni.setStorageSync("userId", res.data.userId);
        uni.setStorageSync("username", res.data.username);
        uni.showToast({ title: "登录成功", icon: "success" });
        setTimeout(() => uni.switchTab({ url: "/src/pages/index/index" }), 500);
      } else {
        uni.showToast({ title: res.msg || "登录失败", icon: "none" }); // 增加兜底
      }
    };

    return { username, password, login, register, quickLogin };
  },
};
    <view class="login-container">
        <!-- 顶部切换栏 -->
        <view class="login-tabs">
            <view class="login-tab" :class="{ active: activeTab === 'job' }" @click="switchTab('job')">
                我要找工作
            </view>
            <view class="login-tab" :class="{ active: activeTab === 'recruit' }" @click="switchTab('recruit')">
                我要招人
            </view>
        </view>

        <!-- 手机号输入框 -->
        <view class="input-group">
            <picker mode="selector" :range="countryCodes" @change="onCountryCodeChange">
                <view class="country-code">{{ countryCode }}</view>
            </picker>
            <input class="login-input" placeholder="请输入手机号" v-model="phone" maxlength="11" type="number" />
            <view class="input-error" v-if="phoneError">{{ phoneError }}</view>
        </view>

        <!-- 验证码输入框 -->
        <view class="input-group">
            <input class="login-input" placeholder="请输入验证码" v-model="code" maxlength="6" type="number" />
            <button class="code-btn" :disabled="codeBtnDisabled" @click="getCode">{{ codeBtnText }}</button>
            <view class="input-error" v-if="codeError">{{ codeError }}</view>
        </view>

        <!-- 协议勾选 -->
        <view class="agreement">
            <checkbox-group @change="onAgreementChange">
                <checkbox :value="'agree'" :checked="agreed" />
            </checkbox-group>
            <text>我已阅读并同意</text>
            <text class="link" @click="openService">《指缘用户服务协议》</text>
            <text class="link" @click="openPrivacy">《个人信息保护政策》</text>
        </view>

        <!-- 登录/注册按钮 -->
        <button class="login-btn" :disabled="!canSubmit" @click="submit">登录/注册</button>

        <!-- 密码登录链接 -->
        <view class="password-login" @click="goPasswordLogin">密码登录</view>

        <!-- 备案与服务信息 -->
        <view class="footer-info">
            <text>京公网安备11010502035189号 | 津ICP备15007986号-11</text>
            <text>ICP经营许可证：含B2-20160007 | 算法备案信息</text>
            <text>人力资源服务许可证 | 营业执照 | 投诉举报邮箱</text>
            <text>企业服务类线索和违法推荐/成年人类报送：400-6212-266，jubao@liepin.com</text>
            <text>个人信息保护政策 | 猎聘用户服务协议</text>
        </view>
    </view>
</template>

<script>
import { useUserStore } from '@/store/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

export default {
    data() {
        return {
            /**
             * 当前选中的tab
             * @type {string}
             */
            activeTab: 'job',
            /**
             * 手机号
             * @type {string}
             */
            phone: '',
            /**
             * 验证码
             * @type {string}
             */
            code: '',
            /**
             * 是否同意协议
             * @type {boolean}
             */
            agreed: false,
            /**
             * 国家区号
             * @type {string}
             */
            countryCode: '+86',
            /**
             * 区号选择列表
             * @type {string[]}
             */
            countryCodes: ['+86', '+852', '+853', '+886'],
            /**
             * 验证码按钮文本
             * @type {string}
             */
            codeBtnText: '获取验证码',
            /**
             * 验证码按钮是否禁用
             * @type {boolean}
             */
            codeBtnDisabled: false,
            /**
             * 手机号错误提示
             * @type {string}
             */
            phoneError: '',
            /**
             * 验证码错误提示
             * @type {string}
             */
            codeError: '',
            /**
             * 验证码倒计时
             * @type {number}
             */
            countdown: 0,
            /**
             * 验证码倒计时定时器
             * @type {number|null}
             */
            countdownTimer: null
        }
    },
    computed: {
        /**
         * 是否可以提交表单
         * @returns {boolean}
         */
        canSubmit() {
            return this.phone && this.code && this.agreed && !this.phoneError && !this.codeError;
        }
    },
    methods: {
        /**
         * 切换tab
         * @param {string} tab
         */
        switchTab(tab) {
            this.activeTab = tab;
        },
        /**
         * 国家区号选择事件
         * @param {Object} e
         */
        onCountryCodeChange(e) {
            this.countryCode = this.countryCodes[e.detail.value];
        },
        /**
         * 协议勾选状态变更
         * @param {Object} e
         */
        onAgreementChange(e) {
            const values = e.detail.value;
            this.agreed = values.includes('agree');
        },
        /**
         * 手机号输入校验
         * @param {string} val
         */
        validatePhone(val) {
            const phoneReg = /^1[3-9]\d{9}$/;
            if (!val) {
                this.phoneError = '请输入手机号';
            } else if (!phoneReg.test(val)) {
                this.phoneError = '手机号格式不正确';
            } else {
                this.phoneError = '';
            }
        },
        /**
         * 验证码输入校验
         * @param {string} val
         */
        validateCode(val) {
            if (!val) {
                this.codeError = '请输入验证码';
            } else if (!/^\d{4,6}$/.test(val)) {
                this.codeError = '验证码格式不正确';
            } else {
                this.codeError = '';
            }
        },
        /**
         * 获取验证码按钮点击事件
         * @param {Event} e
         */
        getCode(e) {
            this.validatePhone(this.phone);
            if (this.phoneError) return;
            // 模拟验证码发送与倒计时
            this.codeBtnDisabled = true;
            this.countdown = 60;
            this.codeBtnText = `${this.countdown}s`;
            this.countdownTimer = setInterval(() => {
                this.countdown--;
                this.codeBtnText = `${this.countdown}s`;
                if (this.countdown <= 0) {
                    clearInterval(this.countdownTimer);
                    this.codeBtnText = '获取验证码';
                    this.codeBtnDisabled = false;
                }
            }, 1000);
        },
        /**
         * 登录/注册按钮点击事件
         * @param {Event} e
         */
        submit(e) {
            this.validatePhone(this.phone);
            this.validateCode(this.code);
            if (this.phoneError || this.codeError || !this.agreed) return;
            // 具体登录/注册逻辑
            uni.showToast({ title: '登录成功', icon: 'success' });
        },
        /**
         * 打开服务协议
         */
        openService() {
            // 可跳转到服务协议页面
        },
        /**
         * 打开隐私政策
         */
        openPrivacy() {
            // 可跳转到隐私政策页面
        },
        /**
         * 跳转密码登录
         */
        goPasswordLogin() {
            // 跳转到密码登录页面
        }
    },
    watch: {
        /**
         * 监听手机号变化，自动校验
         */
        phone(val) {
            this.validatePhone(val);
        },
        /**
         * 监听验证码变化，自动校验
         */
        code(val) {
            this.validateCode(val);
        }
    },
    beforeDestroy() {
        if (this.countdownTimer) clearInterval(this.countdownTimer);
    }
}
</script>

<style scoped>
/* 主色调：蓝色 #165DFF */
/* 辅助色：橙色 #FF6600 */
/* 中性色：深灰 #333333，浅灰 #F2F2F2 */

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}
.login-input {
  width: 80%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.login-btn,
.register-btn {
  width: 80%;
  margin: 10px 0;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  font-size: 16px;
}
.register-btn {
  background: #67c23a;
    padding: 40rpx 32rpx;
    max-width: 750rpx;
    margin: 0 auto;
}

.login-tabs {
    display: flex;
    margin-bottom: 60rpx;
    border-bottom: 2rpx solid #f2f2f2;
    position: relative;
}

.login-tab {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    padding-bottom: 16rpx;
    color: #999;
    position: relative;
    font-weight: 500;
    transition: color 0.3s;
}

.login-tab.active {
    color: #165DFF;
    font-weight: 600;
}

.login-tab.active::after {
    content: '';
    display: block;
    width: 40rpx;
    height: 4rpx;
    background: #165DFF;
    border-radius: 2rpx;
    position: absolute;
    left: 50%;
    bottom: -2rpx;
    transform: translateX(-50%);
    transition: width 0.3s;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 48rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    padding: 0 24rpx;
    height: 96rpx;
    position: relative;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    border: 2rpx solid transparent;
    transition: all 0.3s;
}

.input-group:focus-within {
    border-color: #165DFF;
    box-shadow: 0 4rpx 20rpx rgba(22, 93, 255, 0.1);
}

.country-code {
    margin-right: 16rpx;
    color: #333;
    font-size: 28rpx;
    padding-right: 16rpx;
    border-right: 2rpx solid #f2f2f2;
}

.login-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 28rpx;
    outline: none;
    color: #333;
}

.login-input::placeholder {
    color: #BBB;
}

.code-btn {
    margin-left: 16rpx;
    background: none;
    color: #165DFF;
    font-size: 28rpx;
    border: none;
    padding: 0 16rpx;
    font-weight: 500;
    transition: all 0.3s;
}

.code-btn[disabled] {
    color: #BBB;
    cursor: not-allowed;
}

.input-error {
    color: #FF4D4F;
    font-size: 22rpx;
    position: absolute;
    left: 0;
    bottom: -36rpx;
    display: flex;
    align-items: center;
}

.input-error::before {
    content: '!';
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #FF4D4F;
    color: #FFFFFF;
    text-align: center;
    line-height: 20rpx;
    font-size: 18rpx;
    margin-right: 8rpx;
}

.agreement {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    margin-bottom: 64rpx;
    color: #666;
    user-select: none;
    cursor: pointer;
}

.checkbox {
    width: 32rpx;
    height: 32rpx;
    border-radius: 8rpx;
    border: 2rpx;
    margin-right: 12rpx;
}

.link {
    color: #165DFF;
    margin-left: 4rpx;
    text-decoration: underline;
    font-weight: 500;
}

.login-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(90deg, #165DFF, #368CFF);
    color: #fff;
    border: none;
    border-radius: 48rpx;
    font-size: 32rpx;
    margin-bottom: 40rpx;
    opacity: 1;
    box-shadow: 0 10rpx 30rpx rgba(22, 93, 255, 0.2);
    transition: all 0.3s;
    font-weight: 500;
}

.login-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 6rpx 20rpx rgba(22, 93, 255, 0.15);
}

.login-btn[disabled] {
    background: #E6E6E6;
    color: #BBB;
    box-shadow: none;
    cursor: not-allowed;
}

.password-login {
    text-align: right;
    color: #999;
    font-size: 26rpx;
    margin-top: 24rpx;
    text-decoration: underline;
    transition: color 0.3s;
}

.password-login:hover {
    color: #165DFF;
}

.footer-info {
    margin-top: 80rpx;
    text-align: center;
    color: #999;
    font-size: 22rpx;
    line-height: 1.8;
}

.footer-info text {
    display: block;
    margin-bottom: 12rpx;
}
</style>
    